<template>
	<view class="container">
		<!-- 搜索栏 -->
		<search></search>

		<!-- Tab切换区 -->
		<view class="tab-container">
			<view class="tab-item" :class="{ active: activeTab === 0 }" @click="switchTab(0)">
				<text>常规推荐</text>
				<view class="tab-indicator" v-if="activeTab === 0"></view>
			</view>
			<view class="tab-item" :class="{ active: activeTab === 1 }" @click="switchTab(1)">
				<text>新品推荐</text>
				<view class="tab-indicator" v-if="activeTab === 1"></view>
			</view>
			<view class="tab-item" :class="{ active: activeTab === 2 }" @click="switchTab(2)">
				<text>最受欢迎</text>
				<view class="tab-indicator" v-if="activeTab === 2"></view>
			</view>
		</view>

		<!-- 推荐列表 -->
		<view class="recommend-list">
			<view class="recommend-card" v-for="(item, index) in item" :key="item.product_id"
				@click="toDetail(item.product_id)">
				<view class="card-content">
					<image class="product-image" :src="'http://localhost:3000/' + item.product_picture"
						mode="aspectFill"></image>
					<view class="product-info">
						<text class="product-name">{{item.product_name}}</text>
						<view class="product-footer">
							<text class="product-price">¥{{item.product_price}}</text>
							<uni-icons type="heart" size="18" color="#FF6EA1"></uni-icons>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import search from "/components/search/search.vue";
	export default {
		data() {
			return {
				activeTab: 0,
				tabContents: [{
						title: "常规推荐"
					},
					{
						title: "新品推荐"
					},
					{
						title: "最受欢迎"
					}
				],
				item: []
			};
		},
		components: {
			search
		},
		created() {
			this.getPersonalizedRecommendation();
		},
		methods: {
			switchTab(index) {
				this.activeTab = index;
				if (index == 1) {
					this.getNewArrivals();
				} else if (index == 2) {
					this.getPopularBooks();
				} else {
					this.getPersonalizedRecommendation();
				}
			},
			getPersonalizedRecommendation() {
				uni.request({
					url: 'http://localhost:8081/api/product/getPersonalizedRecommendations',
					method: 'POST',
					data: {
						limit: 8,
						algorithm: 'random'
					},
					success: (res) => {
						if (res.data.code === '001') {
							this.item = res.data.recommendations
						}
					},
					fail: (err) => {
						console.error("获取个性化推荐失败:", err);
						uni.showToast({
							title: '获取推荐数据失败',
							icon: 'none'
						});
					}
				});
			},
			getNewArrivals() {
				uni.request({
					url: 'http://localhost:8081/api/product/getPersonalizedRecommendations',
					method: 'POST',
					data: {
						limit: 10,
						algorithm: 'new-arrivals'
					},
					success: (res) => {
						if (res.data.code === '001') {
							this.item = res.data.recommendations;
						}
					},
					fail: (err) => {
						console.error("获取新书速递失败:", err);
						uni.showToast({
							title: '获取新书速递数据失败',
							icon: 'none'
						});
					}
				});
			},
			getPopularBooks() {
				uni.request({
					url: 'http://localhost:8081/api/product/getPersonalizedRecommendations',
					method: 'POST',
					data: {
						limit: 10,
						algorithm: 'popular'
					},
					success: (res) => {
						if (res.data.code === '001') {
							this.item = res.data.recommendations;
						}
					},
					fail: (err) => {
						console.error("获取热门榜单失败:", err);
						uni.showToast({
							title: '获取热门榜单数据失败',
							icon: 'none'
						});
					}
				});
			},
			toDetail(id) {
				uni.navigateTo({
					url: "/pages/details/details?id=" + id
				})
			}
		}
	};
</script>

<style lang="less" scoped>
	.container {
		padding: 20rpx 30rpx;
		background-color: #f8f8f8;
		min-height: 100vh;
	}

	/* Tab栏样式 */
	.tab-container {
		display: flex;
		justify-content: space-around;
		margin: 30rpx 0;
		background-color: #fff;
		border-radius: 50rpx;
		padding: 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);

		.tab-item {
			position: relative;
			padding: 10rpx 30rpx;
			font-size: 32rpx;
			color: #666;
			text-align: center;
			transition: all 0.3s;

			&.active {
				color: #FF6EA1;
				font-weight: bold;
			}

			.tab-indicator {
				position: absolute;
				bottom: -10rpx;
				left: 50%;
				transform: translateX(-50%);
				width: 60rpx;
				height: 6rpx;
				background-color: #FF6EA1;
				border-radius: 3rpx;
			}
		}
	}

	/* 推荐列表样式 */
	.recommend-list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 30rpx;
		margin-top: 20rpx;

		.recommend-card {
			background-color: #fff;
			border-radius: 20rpx;
			overflow: hidden;
			box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
			transition: transform 0.3s;

			&:active {
				transform: scale(0.98);
			}

			.card-content {
				display: flex;
				flex-direction: column;
				height: 100%;

				.product-image {
					width: 100%;
					height: 350rpx;
					border-radius: 20rpx 20rpx 0 0;
				}

				.product-info {
					padding: 20rpx;
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.product-name {
						font-size: 28rpx;
						color: #333;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						overflow: hidden;
						text-overflow: ellipsis;
						margin-bottom: 15rpx;
					}

					.product-footer {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.product-price {
							font-size: 32rpx;
							color: #FF6EA1;
							font-weight: bold;
						}
					}
				}
			}
		}
	}
</style>